import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import DevProgress from '@site/src/components/mobile/DevProgress'
import videoPath from '/static/video/mirror-control.mp4'
import VideoPlayer from '@site/src/components/VideoPlayer'
import Translate from '@docusaurus/Translate'

const progressValue = 30
export default function MobileMirrorControl(): React.JSX.Element {
  return (
    <section className={clsx('hero shadow--lw', styles.heroBanner)}>
      <div className="container">
        <div className="row">
          <div className={clsx('col col--6', styles.center)}>
            <VideoPlayer videoPath={videoPath} />
          </div>
          <div
            className={clsx(
              'col col--5 col--offset-1',
              styles.textCenter
            )}>
            <h1 className="hero__title">
              <Translate
                id="component.mobile.MobileMirrorControl.title"
                description="the title of mirror control component.home.on PolyOS Mobile page">
                Mirror Control
              </Translate>
            </h1>
            <p className={clsx(styles.subtitle)}>
              <Translate
                id="component.mobile.MobileMirrorControl.subtitle"
                description="the subtitle of mirror control component.home.on PolyOS Mobile page">
                PolyOS Mobile enables the creation of a distributed
                operating system grid across multiple devices,
                fostering mutual awareness within the grid and
                culminating in the formation of a super-terminal. By
                amalgamating the hardware and software computational
                capabilities between devices, it offers users a more
                seamlessly integrated distributed experience,
                effortlessly facilitating cross-device migration and
                multi-device collaboration.
              </Translate>
            </p>
            <div className={clsx('row')}>
              <div className="col --12">
                <DevProgress
                  progress={progressValue}
                  link="/community"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
